import React from 'react';
import { Tabs, Input, Select, Button } from 'antd'
import styles from './index.module.scss'
const { TabPane } = Tabs;
const { Option } = Select;
const AddConsumer: React.FC = () => {
    function callback(key: any) {
        console.log(key);
    }
    function handleChange(value: any) {
        console.log(`selected ${value}`);
    }
    return (
        <div><h2> 添加用户</h2>
        <div className={styles.userBox} style={{display: "-webkit-inline-flex",flexWrap:'wrap'}}>
           
            <div className='userItema' style={{ width: 380, height: 300, border: '1px solid #ccc', }}>
                <Tabs onChange={callback} type="card" style={{ margin: '15px 10px' }}>
                    <TabPane tab="添加身份" key="1">
                        <Input placeholder="请输入用户名" style={{ width: '90%', marginLeft: 15, marginBottom: 10 }} />
                        <Input placeholder="请输入密码" style={{ width: '90%', marginLeft: 15, marginBottom: 10 }} />
                        <Select placeholder='请选择身份id' style={{ width: 140,marginLeft: 5 }} onChange={handleChange}>
                            <Option value="jack">Jack</Option>
                            <Option value="lucy">Lucy</Option>
                            <Option value="disabled" disabled>
                                Disabled
                            </Option>
                            <Option value="Yiminghe">yiminghe</Option>
                        </Select><br />
                        <Button type="primary" style={{ margin: '15px 10px', width: 100 }}>确定</Button><Button style={{ width: 60 }}>重设</Button>
                    </TabPane>
                    <TabPane tab="更新身份" key="2">
                        <Select placeholder='请选择身份id' style={{ width: 140,marginBottom: 10,marginLeft: 5  }} onChange={handleChange}>
                            <Option value="jack">Jack</Option>
                            <Option value="lucy">Lucy</Option>
                            <Option value="disabled" disabled>
                                Disabled
                            </Option>
                            <Option value="Yiminghe">yiminghe</Option>
                        </Select>
                        <Input placeholder="请输入用户名" style={{ width: '90%', marginLeft: 15, marginBottom: 10 }} />
                        <Input placeholder="请输入密码" style={{ width: '90%', marginLeft: 15, marginBottom: 10 }} />
                        <Select placeholder='请选择身份id' style={{ width: 140,marginBottom: 10,marginLeft: 5  }} onChange={handleChange}>
                            <Option value="jack">Jack</Option>
                            <Option value="lucy">Lucy</Option>
                            <Option value="disabled" disabled>
                                Disabled
                            </Option>
                            <Option value="Yiminghe">yiminghe</Option>
                        </Select><br />
                        <Button type="primary" style={{ margin: '15px 10px', width: 100 }}>确定</Button><Button style={{ width: 60 }}>重设</Button>
                    </TabPane>
                </Tabs>
            </div>
            <div className='userItemb' style={{ width: 380, height: 300, border: '1px solid #ccc', }}>
                <Tabs onChange={callback} type="card" style={{ margin: '15px 10px' }}>
                    <TabPane tab="添加身份" key="1">
                        <Input placeholder="请输入用户名" style={{ width: '90%', marginLeft: 15, marginBottom: 10 }} />
                        
                        <Button type="primary" style={{ margin: '15px 10px', width: 100 }}>确定</Button><Button style={{ width: 60 }}>重设</Button>
                    </TabPane>
                    
                </Tabs>
            </div>
            <div className='userItemc' style={{width: 380, height: 300, border: '1px solid #ccc',}}>
                <Tabs onChange={callback} type="card" style={{ margin: '15px 10px' }}>
                    <TabPane tab="添加api接口权限" key="1">
                        <Input placeholder="请输入api接口权限名称" style={{ width: '90%', marginLeft: 15, marginBottom: 10 }} />
                        <Input placeholder="请输入api接口权限url" style={{ width: '90%', marginLeft: 15, marginBottom: 10 }} />
                        <Input placeholder="请输入api接口权限方式" style={{ width: '90%', marginLeft: 15, marginBottom: 10 }} />
                        <Button type="primary" style={{ margin: '15px 10px', width: 100 }}>确定</Button><Button style={{ width: 60 }}>重设</Button>
                    </TabPane>
                </Tabs>
            </div>
            <div className='userItemd' style={{ width: 380, height: 300, border: '1px solid #ccc', }}>
                <Tabs onChange={callback} type="card" style={{ margin: '15px 10px' }}>
                    <TabPane tab="添加视图接口权限" key="1">
                        <Select placeholder='请选择已有视图' style={{ width: 140,marginLeft: 5 }} onChange={handleChange}>
                            <Option value="jack">Jack</Option>
                            <Option value="lucy">Lucy</Option>
                            <Option value="disabled" disabled>
                                Disabled
                            </Option>
                            <Option value="Yiminghe">yiminghe</Option>
                        </Select><br />
                        <Button type="primary" style={{ margin: '15px 10px', width: 100 }}>确定</Button><Button style={{ width: 60 }}>重设</Button>
                    </TabPane>
                </Tabs>
            </div>
            <div className='userIteme' style={{ width: 380, height: 300, border: '1px solid #ccc', }}>
                <Tabs onChange={callback} type="card" style={{ margin: '15px 10px' }}>
                    <TabPane tab="给身份设置api接口权限" key="1">
                        <Select placeholder='请选择身份id' style={{ width: 140,marginLeft: 5 }} onChange={handleChange}>
                            <Option value="jack">Jack</Option>
                            <Option value="lucy">Lucy</Option>
                            <Option value="disabled" disabled>
                                Disabled
                            </Option>
                            <Option value="Yiminghe">yiminghe</Option>
                        </Select><br />
                        <Select placeholder='请选择api接口权限' style={{ width: 140,marginLeft: 5 ,marginTop:10}} onChange={handleChange}>
                            <Option value="jack">Jack</Option>
                            <Option value="lucy">Lucy</Option>
                            <Option value="disabled" disabled>
                                Disabled
                            </Option>
                            <Option value="Yiminghe">yiminghe</Option>
                        </Select><br />
                        <Button type="primary" style={{ margin: '15px 10px', width: 100 }}>确定</Button><Button style={{ width: 60 }}>重设</Button>
                    </TabPane>
                </Tabs>
            </div>
            <div className='userItemf' style={{ width: 380, height: 300, border: '1px solid #ccc', }}>
                <Tabs onChange={callback} type="card" style={{ margin: '15px 10px' }}>
                    <TabPane tab="给身份设置视图权限" key="1">
                        <Select placeholder='请选择身份id' style={{ width: 140,marginLeft: 5 }} onChange={handleChange}>
                            <Option value="jack">Jack</Option>
                            <Option value="lucy">Lucy</Option>
                            <Option value="disabled" disabled>
                                Disabled
                            </Option>
                            <Option value="Yiminghe">yiminghe</Option>
                        </Select><br />
                        <Select placeholder='请选择视图权限id' style={{ width: 140,marginLeft: 5,marginTop:10 }} onChange={handleChange}>
                            <Option value="jack">Jack</Option>
                            <Option value="lucy">Lucy</Option>
                            <Option value="disabled" disabled>
                                Disabled
                            </Option>
                            <Option value="Yiminghe">yiminghe</Option>
                        </Select><br />
                        <Button type="primary" style={{ margin: '15px 10px', width: 100 }}>确定</Button><Button style={{ width: 60 }}>重设</Button>
                    </TabPane>
                </Tabs>
            </div>
        </div>
        </div>
    );
}

export default AddConsumer;